<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/xiangqing.css">
        <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    </head>
    <body>
        <div class="box1">
            <div class="header1">
                <ul>
                    <li>小米商城</li>
                    <span>|</span>
                    <li>MIUI</li>
                    <span>|</span>
                    <li>loT</li>
                    <span>|</span>
                    <li>云服务</li>
                    <span>|</span>
                    <li>金融</li>
                    <span>|</span>
                    <li>有品</li>
                    <span>|</span>
                    <li>小爱开放平台</li>
                    <span>|</span>
                    <li>企业团购</li>
                    <span>|</span>
                    <li>资质证照</li>
                    <span>|</span>
                    <li>协议规则</li>
                    <span>|</span>
                    <li>下载APP</li>
                    <span>|</span>
                    <li>Select Location</li>
                </ul>
                <ol>
                    <li><div class="shop">购物车(0)</div></li>
                    <li>消息通知</li>
                    <span>|</span>
                    <li>注册</li>
                    <span>|</span>
                    <li>登录</li>  
                </ol>   
            </div>
        </div>
        <div class="box2">
            <div class="header2">
                <div class="logo">
                    <img src="//s02.mifile.cn/assets/static/image/mi-logo.png" alt="">
                </div>
                <ul class="nav-top">
               
                </ul>
                <form class="select" action="">
                    <input type="text" name="" id="inp">
                    <span></span>
                </form>
            </div>
            
            <div class="nav-box">
               <ul>

               </ul>
            </div>
        </div>
        <div class="box3">
            <h2 class="a1">RedmiBook 14 增强版</h2>
            <div class="con">
                <div class="left">
                    <span>|</span>
                    <a href="">RedmiBook 14 锐龙版</a>
                </div>
                <div class="right">
                    <a href="">概述</a>
                    <span>|</span>
                    <a href="">参数</a>
                    <span>|</span>
                    <a href="">F码通道</a>
                    <span>|</span>
                    <a href="">用户评价</a>
                </div>
            </div>
        </div>
        <div class="box4">
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1566878924.46657233.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1566878924.49099638.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1566878924.57393022.jpg" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
            </div>
            <div class="content">
                <h1>RedmiBook 14 增强版</h1>
                <p>「3.5-3.8女神专属优惠！笔记本低至2999元起，每日前100名下单赠蓝牙音箱，3月8日当天买Redmibook 14 增强版 粉色款还送负离子吹风机!」全新十代酷睿处理器 / MX250独显 / 14英寸超窄边框高清屏 / 小米手环极速解锁 / 炫酷多彩任你挑选</p>
                <p>小米自营</p>
                <p class="price"><span>￥4299元</span><span>￥4499</span></p>
                <div class="time">
                    <p>秒杀</p>
                    <p>距结束 1天 03时 31分 09秒</p>
                </div>
                <div class="pri">
                    <span>￥4299元</span><span>￥4499</span>
                </div>
                <div class="text">
                    <span>赠完即止</span>
                    <span>赠送小米小爱蓝牙音箱随身版</span>
                </div>
                <div class="dizhi">
                    <div><span>北京</span><span>北京市</span><span>东城区</span><span>安定门街道</span><span>修改</span></div>
                    <div>有现货</div>
                </div>
                <h2>选择版本</h2>
                <ul class="ul1">
                    <li>i5 8G 512GB MX250 4299元</li>
                    <li>i5 8G 512GB MX250 4299元</li>
                    <li>i5 8G 512GB MX250 4299元</li>
                    <li>i5 8G 512GB MX250 4299元</li>
                </ul>
                <div class="text2">
                    <div class="p1">
                        <p>RedmiBook 14 I5/8G/512G SATA/MX250 银色</p>
                        <p>4299元 <span>4499元</span></p>
                    </div>
                    <div class="p2">
                        秒杀价 ： 4299元
                    </div>
                </div>
                <form action="">
                    <button>登录后购买</button>
                    <button>喜欢</button>
                </form>
                <ul class="ul2">
                    <li>小米自营</li>
                    <li>小米发货</li>
                    <li>7天无理由退货</li>
                    <li>运费说明</li>
                    <li>企业信息</li>
                    <li>7天价格保护</li>
                </ul>
            </div>
           
        </div>
        <div class="end-top">
            <ul>
                <li>预约维修服务</li>
                <li>7天无理由退货</li>
                <li>15天免费换货</li>
                <li>满99元包邮</li>
                <li>520余家售后网点</li>
            </ul>
        </div>
        <div class="end-center">
             <div class="end-left">
                 <dl>
                     <dt>帮助中心</dt>
                     <dd>账户管理</dd>
                     <dd>购物指南</dd>
                     <dd>订单操作</dd>
                 </dl>
                 <dl>
                     <dt>服务支持</dt>
                     <dd>售后政策</dd>
                     <dd>自主服务</dd>
                     <dd>相关下载</dd>
                 </dl>
                 <dl>
                     <dt>线下门店</dt>
                     <dd>小米之家</dd>
                     <dd>服务网点</dd>
                     <dd>授权体验店</dd>
                 </dl>
                 <dl>
                     <dt>关于小米</dt>
                     <dd>了解小米</dd>
                     <dd>加入小米</dd>
                     <dd>投资者关系</dd>
                 </dl>
                 <dl>
                     <dt>关于我们</dt>
                     <dd>新浪微博</dd>
                     <dd>官方微信</dd>
                     <dd>联系我们</dd>
                 </dl>
                 <dl>
                     <dt>特殊服务</dt>
                     <dd>F码通道</dd>
                     <dd>礼物码</dd>
                     <dd>防伪查询</dd>
                 </dl>
             </div>
             <div class="end-right">
                 <p class="phone">400-100-5678</p>
                 <p>
                     周一至周日 8:00-18:00
                     <br>
                     (仅收市话费)
                 </p>
                 <p>人工客服</p>
             </div>
        </div>



        <script src="../lib/swiper/js/swiper.min.js"></script>
        <script src="../js/xiangqing.js"></script>
        <script src="../lib/jquery/dist/jquery.min.js"></script>
        <script>
            getlist()
            function getlist(){
                $.ajax({
                    url:'../lib/nav_top.json',
                    dataType:'json',
                    success:function(res){
                        console.log(res)

                        var str=""
                        res.forEach(item => {
                            str += `<li>${item.name}</li>`
                        })
                        $('.nav-top')
                            .html(str)
                            .on({
                                mouseenter:()=>$('.nav-box').stop().slideDown(),
                                mouseleave:()=>$('.nav-box').stop().slideUp()
                            })
                            .children('li')
                            .on('mouseover',function(){
                                const index=$(this).index()
                                const list=res[index].list
                                var str=''
                                list.forEach(item=>{
                                    str +=`
                                    <li>
                                    <div class="imgs">
                                        <img src="${item.list_url}">
                                    </div>
                                    <div class="name">${item.list_name}</div>
                                    <div class="price">${item.list_price}</div>
                                    </li>
                                    `
                                })
                                $('.nav-box>ul').html(str)
                            })
                        $('.nav-box')
                             .on({
                                 mouseover:function(){$(this).finish().show()},
                                mouseout:function(){$(this).finish().slideUp()}
                            })
                    }

                })
            }

            var mySwiper = new Swiper ('.swiper-container', {
                autoplay:{
                delay:1500
            },
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
  /*   scrollbar: {
      el: '.swiper-scrollbar',
    }, */
  })        
        </script>
    </body>
</html>